<script setup lang="ts" name="UserSelect">
import { useSelectOptionsStore } from '@/stores/selectOptions';
import { UserFilled } from '@element-plus/icons-vue';

const store = useSelectOptionsStore();
const { userOptions } = storeToRefs(store);

defineProps<{
	modelValue: string;
	placeholder?: string;
}>();

const emit = defineEmits(['update:modelValue']);

const getUrl = (url: string) => `${import.meta.env.VITE_API_URL}${url}`;
</script>

<template>
	<el-select
		filterable
		:modelValue="modelValue"
		@update:modelValue="emit('update:modelValue', $event)"
		:placeholder="placeholder || '请选择'"
		style="width: 240px"
	>
		<el-option class="flex items-center" v-for="item in userOptions" :key="item.userId" :label="item.name" :value="item.userId">
			<el-avatar v-if="item.avatar" :size="25" :src="getUrl(item.avatar)" />
			<el-avatar v-else :size="25" :icon="UserFilled" />
			<span class="ml-2">{{ item.name }}</span>
		</el-option>
	</el-select>
</template>
